<template>
	<view class="particulars page">
		<status-bar :title='art.website_article_title' :goHome='fromShare'></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="particularsContent" v-if='art'>
			<view class="titles">{{art.website_article_title}}</view>
			<view class="looks">
				<view class="leftDate">
					<text>{{art.articleSource}}</text>
				</view>
				<view class="rightData">
					<view>{{art.website_article_addtime}}</view>
				</view>
			</view>
			<!-- 简洁 -->
			<view class="info">{{art.website_article_info}}</view>
			<!-- 图集 -->
			<view class="swiper" v-if='atla && atla.length>0'>
				<swiper class="swiper__main" autoplay="true" circular="true" interval="4000" duration="800">
					<block v-for="(item, index) in atla" :key="index">
						<swiper-item>
							<image class="topImg" :src="item" mode="aspectFill" @click="imgFix(index)"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="contentsen">
				<mp-html :content="art.website_article_content" lazy-load scroll-table selectable use-anchor show-with-animation/>
			</view>
			<view class="contentsen" v-if="art.jumpRoute.state == 1" @click="toUrl(art.jumpRoute.route)">
				<image :src="imgUrl+art.jumpRoute.img" mode="widthFix"></image>
			</view>
			
		</view>
		<empty v-if="error" type='1' cat='4' :msg='errMsg'></empty>
		<!-- <view class="bottomInput">
			<input type="text" confirm-type="done" value="" placeholder="发表评论..." />
		</view> -->
		<text class="dowload_file" v-if='art.attachment_name' @click="openFile(art.attachment_url)">
			<text class="thmeBg" :style="{
				'--color': color
			}">下载{{art.attachment_name}}</text>
		</text>
		<!-- 表单 -->
		<formList v-if='form_list' :ids='form_list' info='false'></formList>

		<view class="collect-box flex-box">
			<view class="collect flex-box align-center" @click="artCollect">
				<text v-if='art.collect == 1' class="iconfont icon-xingxing"></text>
				<text v-else class="iconfont icon-xingxing1"></text>
				<view class="rtxt">{{art.collect == 1?'已收藏':'收藏'}}</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="share-box  flex-box align-center" @click="poster1" v-if='art.poster'>
				<text class="iconfont icon-fenxiang1"></text>
				<view class="rtxt">分享</view>
			</view>
			<!-- #endif -->
		</view>
		
		<canvas style="width: 300px; height: 536px;position: fixed;top: -99999px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		<view class="mask flex-box align-center flex-center" :style="{'padding-top': navHeight+'px'}" v-if='showPoster' @click="showPoster=false">
			 <view>
				 <image :src="posterImg" mode="widthFix" class="posterImg" :show-menu-by-longpress='true' @click.stop></image>
				 <view class="save-poster thmeBg" :style="{'--color':color}" @click.stop="saveEwm">
					 <text>下载海报</text>
				</view>
			 </view>
		</view>
		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	var that;
	import formList from '../../components/formList.vue'
	export default {
		components: {
			formList: formList
		},
		data() {
			return {
				navHeight:getApp().globalData.navHeight,
				toTop: false,
				showModal: false,
				color: getApp().globalData.color,
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				art: '',
				artId: '',
				atla: '',
				errMsg: '',
				error: false,
				fromShare: 0,
				form_list: '',
				showPoster: false,
				posterImg:''
			}
		},
		onShow() {

		},
		onLoad(options) {
			that = this;
			if (options.fromShare) {
				that.fromShare = options.fromShare
			}
			that.artId = options.artId;
			that.$http.get({ // 获取文章详情
				url: '/zzjApp/articleInfo',
				data: {
					v_id: uni.getStorageSync('vid'),
					bid: uni.getStorageSync('bid'),
					website_article_id: that.artId
				}
			}).then(res => {
				if (res.data) {
					uni.setNavigationBarTitle({
						title: res.data.website_article_title
					})
					if (res.data.order_id && res.data.order_id != 0) {
						that.form_list = [{
							'order_id': res.data.order_id
						}]
					}
					that.art = res.data;
					var capture = that.art.website_article_content;
					that.art.website_article_content = that.$common.richTxt(capture).html
					if (that.art.website_article_atlas) {
						that.art.website_article_atlas = that.art.website_article_atlas.split(',');
						that.art.website_article_atlas.forEach((item, index) => {
							item = that.imgUrl + item;
							that.art.website_article_atlas[index] = item
						})
						that.atla = that.art.website_article_atlas
					}
				} else {
					that.error = true
					that.errMsg = res.msg
				}
				// #ifdef H5
				this.H5Share('pageType=4&artId=' + that.artId, {
					title: that.art.website_article_title ? that.art.website_article_title : '',
					desc: that.art.website_article_info ? that.art.website_article_info : '',
					imageUrl: that.art.website_article_img ? that.imgUrl + that.art.website_article_img : ''
				})
				// #endif
			})
			
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: that.art.website_article_title ? that.art.website_article_title : shareData.title,
				desc: that.art.website_article_info ? that.art.website_article_info : shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid + '&pageType=4&artId=' + this.artId,
				imageUrl: that.art.website_article_img ? that.imgUrl + that.art.website_article_img : shareData.imageUrl
			}
		},
		methods: {
			poster1(){
				that.$http.post({
					url: '/singleSaleApi/getArticleCode',
					data: {
						v_id: uni.getStorageSync('vid'),
						bid: uni.getStorageSync('bid'),
						website_article_id: that.artId
					}
				}).then(res => {
					if(res.code == 100 && res.data){
						uni.showLoading({
							title:'海报生成中···'
						})
						var context = uni.createCanvasContext('firstCanvas'),bg='',avatar='';
						if(res.data.poster){
							uni.downloadFile({
								url: that.imgUrl + res.data.poster,
								success: (e) => {
									bg = e.tempFilePath;
									context.drawImage(bg, 0, 0, 300,536);
									if(res.data.qrCodeImg){
										uni.downloadFile({
											url: that.imgUrl + res.data.qrCodeImg,
											success: (q) => {
												avatar = q.tempFilePath;
												context.drawImage(avatar, 218, 459, 62 ,62);
												context.draw(true,() => {
													uni.canvasToTempFilePath({
														canvasId: 'firstCanvas',
														success: (res) => {
															uni.hideLoading()
															that.showPoster = true
															that.posterImg = res.tempFilePath;
														},
														fail: (res) => {
															uni.hideLoading()
															uni.showToast({
																title: '图片加载失败',
																duration: 2000
															})
														}
													});
												});
											}
										})
									}else{
										uni.hideLoading()
										uni.showToast({
											title: '获取用户二维码出错！',
											icon: 'none'
										})
									}
								}
							})
						}else{
							uni.hideLoading()
							uni.showToast({
								title: '获取海报背景出错！',
								icon: 'none'
							})
						}
						
					}else{
						
					}
				})
			},
			saveEwm: function(e) {
				//获取相册授权
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									that.saveImgToLocal();
								},
								fail() { 
									uni.showToast({
										title: "拒绝后将无法保存图片！",
										icon: "none"
									});
								}
							})
						} else { //用户已经授权过了
							that.saveImgToLocal();
						}
					}
				})
			},
			saveImgToLocal: function(e) {
				uni.saveImageToPhotosAlbum({
					filePath: that.posterImg,
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
					},
					fail: function() {
						uni.showToast({
							title: "保存失败",
							icon: "none"
						});
					}
				})
			},
			artCollect() {
				var vid = uni.getStorageSync("vid")
				if (!vid || vid == 0) {
					that.showModal = true
					return
				}
				that.$http.post({
					url: '/singleSaleApi/article_collect',
					data: {
						v_id: vid,
						bid: uni.getStorageSync("bid"),
						website_article_id: that.artId
					}
				}).then(res => {
					if (res.code == 200) {
						if (that.art.collect == 0) {
							that.art.collect = 1
						} else {
							that.art.collect = 0
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			time(t) {
				return this.$common.timeFormat(t, 'Y/M/D h:m')
			},
			imgFix(index) {
				var that = this;
				// 预览图片
				uni.previewImage({
					current: index,
					loop: true,
					urls: that.art.website_article_atlas,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			openFile(url) {
				if (url) {
					uni.showLoading({
						title: '请稍等'
					})
					// #ifdef H5
					window.location.href = that.imgUrl + url
					// #endif
					// #ifndef H5
					uni.downloadFile({
						url: that.imgUrl + url,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log('打开文档成功');
								},
								complete: function() {
									uni.hideLoading()
								}
							})
					// 		uni.showLoading({
					// 			title: '保存中'
					// 		})
					// 		console.log(filePath)
					// 		uni.saveFile({
					// 		    tempFilePath: filePath,
					// 		    success: function (res1) {
					// 				var savedFilePath = res1.savedFilePath;
					// 				uni.hideLoading()
					// 				console.log(res1)
					// 				uni.showModal({
					// 				    title: '保存成功！',
					// 				    content: '路径为：'+savedFilePath,
					// 				    success: function (res2) {
					// 				        if (res2.confirm) {
					// 				            console.log('用户点击确定');
					// 				        } else if (res2.cancel) {
					// 				            console.log('用户点击取消');
					// 				        }
					// 				    }
					// 				});
					// 		    }
					// 		});
						},
						fail: function() {
							uni.hideLoading()
						}
					})
					// #endif
				} else {
					uni.showToast({
						title: '获取路径失败！',
						icon: 'none'
					})
				}

			},
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				that.toTop = true
			} else {
				that.toTop = false
			}
		}
	}
</script>

<style scoped lang="scss">
	/* page{} */
	uni-page-body,
	uni-page-refresh {
		height: 100%;
	}

	.particulars {
		width: 100%;
		overflow: hidden;
		background: white;
		min-height: 100vh;
	}

	.particularsContent {
		width: 100%;
		height: calc(100% - 10upx);
		overflow-x: hidden;
		overflow-y: auto;
		padding: 20upx;
	}

	.bottomInput {
		width: 100%;
		padding: 20upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		background: #F5F5F5;
		height: 100upx;
		border-top: 1upx solid #F2F2F2;
	}

	.titles {
		width: 100%;
		padding-bottom: 40upx;
		color: #333333;
		font-size: 32upx;
		font-weight: 700;
		line-height: 50upx;
	}

	.looks {
		overflow: hidden;
	}

	.leftDate {
		float: left;
		color: #666666;
		font-size: 24upx;
	}

	/* .leftDate image{width: 28upx;height:28upx;float: left;margin-right: 10upx;margin-top: 4upx;} */
	.leftDate text {
		margin-right: 10upx;
	}

	.rightData {
		float: right;
	}

	.rightData view {
		float: left;
		color: #666666;
		font-size: 24upx;
		margin-right: 20upx;
	}

	.contentsen {
		width: 100%;
		color: #666666;
		font-size: 28upx;
		line-height: 48upx;
		margin-top: 20upx;
		image{
			width: 100%;
		}
	}

	.topImg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.swiper__main {
		margin-top: 14upx;
		height: 400upx;
	}

	.info {
		color: #999;
		margin-top: 30upx;
		margin-bottom: 30upx;
		border-bottom: 1px solid #eeeeee;
		line-height: 40upx;
		padding-bottom: 10upx;

	}

	.collect-box {
		background-color: rgba(0, 0, 0, 0.2);
		position: fixed;
		right: 30rpx;
		border-radius: 80rpx;
		bottom: calc(80rpx + constant(safe-area-inset-bottom));
		bottom: calc(80rpx + env(safe-area-inset-bottom));
		padding: 0 10rpx;
		z-index: 33;
		>view {
			text-align: center;
			// width: 170rpx;
			height: 70rpx;
			padding: 0 20rpx;
		}

		.rtxt {
			color: white;
			margin-top: -4rpx;
		}

		.icon-xingxing1 {
			font-size: 40rpx;
			color: white;
		}
		
		.icon-xingxing {
			font-size: 40rpx;
			color: $uni-color-follow;
			// animation: cc .4s ease-in-out;
		}
		@keyframes cc {
			0% {
				transform: scale(0.5);
			}

			50% {
				transform: scale(1.2);
			}

			100% {
				transform: scale(1);
			}
		}

		.icon-fenxiang1 {
			font-size: 40rpx;
			color: #666666;
		}

		.iconfont {
			display: inline-block;
			margin-right: 6rpx;
		}
	}

	.back_top {
		bottom: 180rpx;
		right: 30rpx;
	}

	// 下载
	.dowload_file {
		display: block;
		padding: 0 30rpx 50rpx;

		text {
			color: white;
			padding: 10rpx 28rpx;
			text-decoration: underline;
			border-radius: 40rpx;
		}
	}
	// 海报
	.save-poster{
		color: white;
		width: 222rpx;
		text-align: center;
		line-height: 66rpx;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
	}
	.posterImg{
		width: 600rpx;
		height: 1072rpx;
	}
</style>
